fix: remove opacity for disabled in components#10003
Conversation
|
🚀 MCP preview deployed to Vercel: https://kolibri-8g8tcmjt9-public-ui-kolibri-mcp.vercel.app |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the handling of disabled states across multiple themes by moving opacity definitions from shared mixins into theme-specific stylesheets. The review identified critical issues with SCSS selector nesting in the form-field mixins for the bwst and default themes, where the current syntax incorrectly expects nested base classes. Furthermore, the removal of styles in the kern theme resulted in the loss of the cursor: not-allowed property, which is necessary for maintaining proper accessibility and user experience.
I am having trouble creating individual review comments. Click here to see my feedback.
packages/themes/bwst/src/mixins/form-field.scss (39-44)
The selector &--disabled & expands to .kol-form-field--disabled .kol-form-field, which implies that a .kol-form-field element is nested inside another element with the --disabled modifier. Based on the shared mixin's logic, the modifier is typically applied to the same element. This selector will likely fail to match the intended labels and hints. It is recommended to target the children directly from the modifier.
&--disabled {
&__label,
&__hint {
opacity: 0.5;
}
}
packages/themes/default/src/mixins/form-field.scss (44-49)
The selector &--disabled & expands to .kol-form-field--disabled .kol-form-field, which appears to be incorrect as it expects nesting of the base class. It should target the sub-elements directly under the disabled state modifier to ensure the opacity is applied correctly.
&--disabled {
&__label,
&__hint {
opacity: 0.5;
}
}
packages/themes/kern/src/mixins/_form-field.mixin.scss (13-17)
The removal of this block eliminates the cursor: not-allowed style for disabled and read-only labels in the Kern theme. While removing the opacity: 1 override is consistent with the PR's goal of moving opacity to themes, the cursor style should be maintained to ensure proper UX and accessibility, indicating that the field is non-interactive.
&--read-only &__label,
&--disabled &__label {
cursor: not-allowed;
}
|
Netlify Draft Deployment |
2 participants
No description provided.